<template>
    <div class="box">
        <div class="title">点赞文章</div>
        <div class="search">
            <div class="search-input">
                <el-input
                placeholder="输入用户信息"
                v-model="input"
                clearable
                @keydown.enter="searchArt"
                />
            </div>
            <div class="search-search">
                <el-button type="primary" @click="searchArt">搜索</el-button>
            </div>
        </div>
        <div class="body">
          <el-table
          ref="multipleTable"
          :data="allLikeArticle"
          border
          fit="false"
          stripe
          show-header
          highlight-current-row
          height="100%"
          :row-style="{height: '50px'}"
          @selection-change="handleSelectionChange"
          v-loading="isLoad"
        >
          <el-table-column type="selection" width="55" align="center" fixed />  
          <el-table-column property="articleContent" label="文章标题" show-overflow-tooltip width="300" align="left"/>
          <el-table-column property="articleTitle" label="职位名称" show-overflow-tooltip width="420" align="center"/>
          <el-table-column property="nickName" label="文章作者" show-overflow-tooltip width="420" align="center"/>
          <el-table-column property="articleLike" label="文章收藏数" show-overflow-tooltip width="420" align="center"/>
          <el-table-column align="center" width="140" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button size="small" @click="dialogUpdate(scope.$index)">修改</el-button>
              <el-button size="small" type="danger" @click="delAsks(scope.$index,scope.row.askTypeId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="allPages"
                @current-change="getPageNum"
                @prev-click="getPageNum"
                @next-click="getPageNum"
            />
        </div>
    </div>
</template>

<script>

import {  getAllLikeArticle,getLikeArticles,getArticleUsers} from '@/api/secondary_api/PageLikeArticle'

export default {
  data(){
    return{
      articleList:[],//一页用户
      pageNum:1,//当前页
      pageSize:10,//每页显示的条数
      allPages:0,//一共多少页
      allArticle:[],
      allLikeArticle:[],
      pageTotals:0,
    }
  },
  methods:{

  },
  mounted(){
    getAllLikeArticle().then(
      response=>{
        this.allArticle = response.data;
        for (let index = 0; index < this.allArticle.length; index++) {
         getLikeArticles(this.allArticle[index].articleId).then(
            response=>{
              this.allLikeArticle.push(response.data);
              if(this.allLikeArticle.length == this.allArticle.length){
                var tmpArr = [];
                for(let j in this.allLikeArticle){
                  getArticleUsers(this.allLikeArticle[j].userId).then(
                    response=>{
                      tmpArr.push(response.data.nickname);
                      if(tmpArr.length == this.allLikeArticle.length){
                        for(let z = 0; z < tmpArr.length;z++){
                          this.allLikeArticle[z]['nickName'] = tmpArr[z];
                          this.pageTotals = this.allLikeArticle.length;
                        }
                      }
                    }
                  );
                }
              }
            }
          )
        }

      }
    );
  },
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  padding: 2% 4%;
  box-sizing: border-box;
}
.title{
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
}
.search{
  width: 100%;
  height: 60px;
  line-height: 30px;
}
.search-input{
  width: 30%;
  height: 100%;
  float: left;
}
.search-search{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 20px;
}
.search-input .el-input{
  height: 70% !important;
  font-size: 17px;
}
.search-search .el-button{
  width: 90%;
  height:70%;
  font-size: 14px;
}
.body{
  width: 100%;
  height: 73%;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
li{
  list-style: none;
}
.body>ul{
  width: 100%;
  height: 100%;
}
.body>ul>li{
  width: 100%;
  height: 8.97% !important;
}
.body>ul>li>div{
  width: 16.5%;
  float: left;
  height: 100%;
  line-height:50px;
  box-sizing: border-box;
}
.body>ul>li>div:last-of-type{
  text-align: center;
}
.body>ul>li>div:nth-of-type(1)~div{
  border-left: 1px solid #ccc;
}
.body>ul>li>div{
  padding-left: 10px;
}
.body>ul>li>div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.body>ul>li:first-of-type{
  background-color: #eee;
}
.body>ul>li:nth-of-type(1)~li{
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.body>ul>li:nth-of-type(11){
  border-style: hidden !important;
}

.body>ul>li .el-button:nth-of-type(1){
  background-color: #ffb800;
  width: 60px;
  height: 30px;
}
.body>ul>li .el-button:nth-of-type(1):hover,.body>ul>li .el-button:nth-of-type(2):hover{
  opacity: 0.4;
}
.body>ul>li .el-button:nth-of-type(2){
  background-color: red;
  width: 60px;
  height: 30px;
}
.pagination{
  width: 100%;
  margin-top: 20px;
}
</style>